<template>
  <ga-form ref="formRef" style="width: 93%" :model="formData">
    <ga-form-item
      field="name"
      label="地域及功能区"
      label-col-flex="120px"
      tooltip="地域及功能区地域及"
      :rules="[RULE.NOT_NULL]"
      :validate-trigger="['change', 'input']"
      :style="{ width: '100%' }"
    >
      <ga-tabs
        v-model:active-key="formData.dataArea"
        hide-content
        style="width: 100%"
        class="vm_create_tab"
        @change="handleChangeArea"
      >
        <ga-tab-pane v-for="item in dataList" :key="item?.id" :title="item?.name" />
      </ga-tabs>
    </ga-form-item>
    <ga-form-item label-col-flex="120px">
      <cusRadio
        ref="cusRadioRef"
        v-model="formData.netArea"
        :dataList="netList"
        @handleChangeRadio="handleChangeNet"
      />
    </ga-form-item>
    <ga-form-item
      tooltip="可用区可用区可用区可用"
      field="cluster"
      label="可用区"
      label-col-flex="120px"
      :rules="[RULE.NOT_NULL]"
      :validate-trigger="['change', 'input']"
    >
      <cusDropdown
        ref="cusDropdownRef"
        :areaList="areaList"
        :disabledAreaList="disabledAreaList"
        @change="handleSelect"
      />
    </ga-form-item>
  </ga-form>
</template>

<script setup>
import { computed, onMounted, reactive, ref } from "vue";
import { RULE } from "@/constant/validators";
import cusDropdown from "../common/cusDropdown.vue";
import cusRadio from "../common/cusRadio.vue";

const formData = reactive({
  dataArea: "",
  netArea: "",
});
// 改变地域及功能区方法
const handleChangeArea = (val) => {
  console.log("地域 ==dataArea==", formData.dataArea);
  initData("dataArea");
};
// 改变集群区法
const handleChangeNet = (idx) => {
  console.log("功能区==netArea==", formData.netArea);
};
// 初始化数据
const cusRadioRef = ref();
const initData = (ways) => {
  switch (ways) {
    case "dataArea":
      cusRadioRef.value.checkedNet = 0;
      formData.netArea = netList.value[0]?.id;
    case "netArea":
      formData.netArea = netList.value[0]?.id;
  }
  console.log("初始化数据");
};

const dataList = ref([
  { id: 1, name: "南方数据中心" },
  { id: 12, name: "外高桥数据中心" },
  { id: 13, name: "金融科技园南区" },
  { id: 31, name: "金融科技园南区" },
  { id: 14, name: "北京IDC" },
  { id: 11, name: "金融科技园南区1" },
  { id: 22, name: "金融科技园南区2" },
]);
const netList = ref([
  { id: 1, name: "集中交易区" },
  { id: 12, name: "综合业务支撑B区" },
  { id: 13, name: "综合业务支撑A区" },
  { id: 31, name: "网上交易A区" },
  { id: 14, name: "集中交易区" },
  { id: 132, name: "综合业务支撑B区" },
  { id: 1665, name: "综合业务支撑A区" },
  { id: 351, name: "网上交易A区" },
  { id: 21, name: "集中交易区" },
  { id: 123, name: "综合业务支撑B区" },
]);
const areaList = ref([
  { id: 1, name: "集群三(鲲鹏3.0)", xc: true },
  { id: 12, name: "集群16(海光高配)", xc: true },
  { id: 14, name: "海光超融合7390(集群五)" },
  { id: 33, name: "海光超融合7390(集群五)" },
  { id: 545, name: "海光超融合" },
  { id: 1544, name: "高浮雕鬼地方(集群五)" },
  { id: 1454, name: "广告费(集群五)" },
  { id: 1454, name: "赣锋干(集群五)" },
  { id: 1874, name: "搞烦(集群五)" },
  { id: 174, name: "广泛广泛广泛(集群五)" },
  { id: 184, name: "广泛广泛(集群五)" },
  { id: 104, name: "广泛广泛刚刚发给(集群五)" },
]);
const disabledAreaList = ref([
  { id: 1874, name: "搞烦(集群五)" },
  { id: 174, name: "广泛广泛广泛(集群五)" },
  { id: 184, name: "广泛广泛(集群五)" },
  { id: 104, name: "广泛广泛刚刚发给(集群五)" },
]);
// const tableData = reactive([
//   {
//     key: "1",
//     name: "Jane Doe",
//     salary: 23000,
//     address: "32 Park Road, London",
//     email: "jane.doe@example.com",
//   },
//   {
//     key: "2",
//     name: "Alisa Ross",
//     salary: 25000,
//     address: "35 Park Road, London",
//     email: "alisa.ross@example.com",
//   },
// ]);
// const columns = [
//   {
//     title: "任务名称",
//     dataIndex: "name",
//   },
//   {
//     title: "方法名称",
//     dataIndex: "name",
//   },
//   {
//     title: "操作",
//     dataIndex: "action",
//     slotName: "action",
//   },
// ];
const handleSelect = (item) => {
  if (!item) return;
  console.log("item=====", item);
};
onMounted(() => {
  formData.dataArea = dataList.value[0]?.id;
  formData.netArea = netList.value[0]?.id;
});
</script>

<style scoped lang="scss">
@import "./vm.scss";
:deep(.garco-tabs-nav-type-line .garco-tabs-tab) {
  margin-left: 0;
  margin-right: 32px;
  font-size: 12px;
}
:deep(.garco-dropdown-open .garco-icon-down) {
  transform: rotate(180deg);
}
</style>
